$(function () {
 initCate()
 initEditor()

 function initCate() {
  // 发起请求
  $.ajax({
   type: 'GET',
   url: '/my/article/cates',
   // 拿到返回数据
   success: function (res) {
    if (res.status !== 0) return layui.layer.msg(res.message)
    console.log(res);
    layui.layer.msg(res.message)
    // 用template模板动态渲染到页面上
    var htmlLstr = template('tpl-cate', res)
    $('[name=cate_id]').html(htmlLstr)

    // layui框架无法渲染动态添加的元素所以要调用layui.form.render()方法重新渲染
    layui.form.render()
   }
  })
 }

 // 1. 初始化图片裁剪器
 var $image = $('#image')

 // 2. 裁剪选项
 var options = {
  aspectRatio: 400 / 280,
  preview: '.img-preview'
 }

 // 3. 初始化裁剪区域
 $image.cropper(options)

 $('#btnChooseImage').on('click', function () {
  $('#coverFile').click()
 })

 $('#coverFile').on('change', function (e) {
  // 获取用户选择的图片
  var files = e.target.files
  // 如果用户未选择就退出
  if (files.length = 0) {
   return
  }
  // 如果用户选择了文件，就把文件存放到URL.createObjectURL里
  var newImgURL = URL.createObjectURL(files[0])


  $image
   .cropper('destroy') // 销毁旧的裁剪区域
   .attr('src', newImgURL) // 重新设置图片路径
   .cropper(options) // 重新初始化裁剪区域
 })


 var art_state = '已发布';
 // 为存为草稿绑定点击事件
 $('#btnSave2').on('click', function () {
  art_state = '草稿';
 })

 // 为表单绑定提交事件
 $('#form-pub').on('submit', function (e) {
  e.preventDefault()
  // 将文章的发布状态存到fd中
  var fd = new FormData(this)
  // console.log(this);
  // console.log(fd);
  fd.append('state', art_state)
  // 将封面裁剪过后的图片输出为一个图片文件
  $image
   .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
    width: 400,
    height: 280
   })
   .toBlob(function (blob) { // 将 Canvas 画布上的内容，转化为文件对象
    // 得到文件对象后，进行后续的操作
    fd.append('cover_img', blob)

    publishArticle(fd)

   })
 })

 function publishArticle(fd) {
  $.ajax({
   type: 'POST',
   url: '/my/article/add',
   data: fd,
   // form date
   contentType:false,
   processData:false,
   success: function (res) {
    if(res.status !== 0) return layui.layer.msg('发布文章失败！')

    layui.layer.msg('发布文章成功！')

    location.href ='../../../article/art_list.html'
   }
  })
 }

})